

<!--------------------------------------------黄笠煌------------------------------------------------------------------>
<template>
    <div>
    <el-table
            :data="ruleData"
            border
            style="width: 100%">
        <el-table-column
                fixed
                prop="id"
                label="条件编号"
                width="150">
        </el-table-column>
        <el-table-column
                prop="distributecentre"
                label="配送中心"
                width="120">
        </el-table-column>
        <el-table-column
                prop="storage"
                label="库房"
                width="120">
        </el-table-column>
        <el-table-column
                prop="weight"
                label="重量"
                width="120">
        </el-table-column>
        <el-table-column
                prop="volume"
                label="体积"
                width="300">
        </el-table-column>
        <el-table-column
                prop="number"
                label="数量"
                width="120">
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="100">
            <template slot-scope="scope">
                <el-button @click="edit(scope.row)" type="text" size="small">修改</el-button>
                <el-button @click="deleteById(scope.row)" type="text" size="small">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
<!--        <el-pagination
                background
                layout="prev, pager, next"
                :total="1000"
                @current-change="page"
        >
        </el-pagination>-->
    </div>
</template>

<script>
    export default {
        methods: {
            edit(row) {
               /* alert(row.id)
                this.$router.push('/Updaterule')*/
                this.$router.push({   //跳转页面并携带参数写法
                    path:"/Updaterule",//跳转目标页面路径
                    query:{ //携带参数，将该行id即row.id赋值给query中id属性
                        id:row.id
                    }//到此即完成携带id到Updaterule页面
                })
                //row.id//row为当前行，取出该行id
            },
            deleteById(row){
                /*alert(row.id)//测试成功，可以获取当前行的id值*/
                const _this=this
                axios.delete('http://localhost:8181/ruleDelById/'+row.id).then(function(resp){
                    _this.$alert(row.id+'号条件删除成功！','消息',{//删除成功提示弹窗
                        confirmButtonText:'确定',
                        callback:action => {
                            window.location.reload()//点击确认后动态刷新页面
                        }
                    })
                })
            }





        },

        data() {
            return {
                ruleData: [{
                    id: '',
                    distributecentre: "",
                    storage: '',
                    weight: '',
                    volume:'' ,
                    number: ''
                }
                ]
            }
        },
        created(){//初始化函数，查出所有条件显示
            const _this=this
            axios.get('http://localhost:8181/ruleList').then(function(resp){
                _this.ruleData=resp.data
             })
        }

    }
</script>